import { Typography } from 'antd';
import { CSSProperties, FC } from 'react';
import { defaultProps, ComponentProps } from './interface';

const { Title } = Typography;

const QuestionTitle: FC<ComponentProps> = (props) => {
  const { isCenter, level, text } = { ...defaultProps, ...props };

  const style: CSSProperties = {
    textAlign: isCenter ? 'center' : 'start',
    marginBottom: 0,
    fontSize: getFontSize(level!),
  };

  function getFontSize(level: number) {
    if (level === 1) return 24;
    if (level === 2) return 20;
    return 16;
  }

  return (
    <Title level={level} style={style}>
      {text}
    </Title>
  );
};

export default QuestionTitle;
